<template>
    <div class="health-container page-container">
        <!-- 主体内容区 -->
        <div class="main-content">
            <!-- 左侧面板 -->
            <div class="left-panel">
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🏥</span>
                        医疗资源分布
                    </div>
                    <div class="medical-chart" ref="medicalChart"></div>
                </div>
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">👥</span>
                        人口健康指数
                    </div>
                    <div class="health-index-chart" ref="healthIndexChart"></div>
                </div>
            </div>

            <!-- 中间面板 -->
            <div class="center-panel">
                <div class="health-map">
                    <el-carousel 
                        :interval="5000" 
                        height="500px"
                        indicator-position="outside"
                        :autoplay="true"
                        arrow="always"
                        class="health-carousel"
                    >
                        <el-carousel-item v-for="(item, index) in carouselData" :key="index">
                            <div class="carousel-content">
                                <el-image style="width: 100%; height: 100%;" fit="cover" :src="item.image" :alt="item.title"/>
                                <div class="carousel-caption">
                                    <h3>{{ item.title }}</h3>
                                    <p>{{ item.description }}</p>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <!-- 添加滚动列表 -->
                <div class="news-list">
                    <div class="news-header">
                        <span class="icon">📰</span>
                        <span class="title">健康动态</span>
                    </div>
                    <el-scrollbar height="200px">
                        <div class="news-content">
                            <el-timeline>
                                <el-timeline-item
                                    v-for="(news, index) in newsList"
                                    :key="index"
                                    :timestamp="news.time"
                                    :type="news.type"
                                    :color="news.color"
                                    :hollow="news.hollow"
                                >
                                    <div class="news-item">
                                        <span class="news-title">{{ news.title }}</span>
                                        <span class="news-desc">{{ news.description }}</span>
                                    </div>
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </el-scrollbar>
                </div>
            </div>

            <!-- 右侧面板 -->
            <div class="right-panel">
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🏃</span>
                        运动设施分布
                    </div>
                    <div class="sports-chart" ref="sportsChart"></div>
                </div>
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">📊</span>
                        健康服务满意度
                    </div>
                    <div class="satisfaction-chart" ref="satisfactionChart"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { ElCarousel, ElCarouselItem, ElTimeline, ElTimelineItem, ElScrollbar } from 'element-plus'
import fwzxImg from '@/assets/img/health/fwzx.png'
import tyzxImg from '@/assets/img/health/tyzx.png'
import yxgyImg from '@/assets/img/health/yxgy.png'
import yyImg from '@/assets/img/health/yy.png'

// 轮播图数据
const carouselData = ref([
    {
        image: fwzxImg, // 临时使用占位图
        title: '广州市第一人民医院',
        description: '三甲医院，年门诊量超过200万人次，提供全方位医疗服务'
    },
    {
        image: tyzxImg,
        title: '天河体育中心',
        description: '城市体育地标，年接待运动人群超过100万人次'
    },
    {
        image: yxgyImg,
        title: '越秀公园',
        description: '城市中心区最大的市民休闲健身场所，日均接待市民5000人次'
    },
    {
        image: yyImg,
        title: '社区健康服务中心',
        description: '全市已建成200个社区健康服务中心，实现15分钟健康服务圈'
    }
])

// 新闻列表数据
const newsList = ref([
    {
        time: '2024-03-20 10:00',
        title: '广州市启动"健康广州2030"计划',
        description: '计划到2030年实现居民健康素养水平达到35%以上',
        type: 'primary' as const,
        color: '#00ff88',
        hollow: false
    },
    {
        time: '2024-03-19 15:30',
        title: '新增10家社区健康服务中心',
        description: '进一步扩大15分钟健康服务圈覆盖范围',
        type: 'success' as const,
        color: '#00a1ff',
        hollow: true
    },
    {
        time: '2024-03-18 09:15',
        title: '智慧医疗服务平台升级',
        description: '推出在线问诊、健康档案管理等新功能',
        type: 'warning' as const,
        color: '#ffd700',
        hollow: false
    },
    {
        time: '2024-03-17 14:20',
        title: '全民健身活动月启动',
        description: '全市将举办超过100场群众性体育活动',
        type: 'info' as const,
        color: '#ff6b6b',
        hollow: true
    },
    {
        time: '2024-03-16 11:45',
        title: '心理健康服务进社区',
        description: '为居民提供免费心理咨询和疏导服务',
        type: 'primary' as const,
        color: '#9370db',
        hollow: false
    },
    {
        time: '2024-03-15 16:30',
        title: '医疗资源优化配置',
        description: '新增床位500张，提升医疗服务能力',
        type: 'success' as const,
        color: '#00ff88',
        hollow: true
    }
])

// 图表实例
const medicalChart = ref<HTMLElement | null>(null)
const healthIndexChart = ref<HTMLElement | null>(null)
const sportsChart = ref<HTMLElement | null>(null)
const satisfactionChart = ref<HTMLElement | null>(null)

// 初始化图表
onMounted(() => {
    // 医疗资源分布图表
    if (medicalChart.value) {
        const chart = echarts.init(medicalChart.value)
        chart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['三甲医院', '二甲医院', '社区医院', '专科医院'],
                textStyle: { color: '#fff' }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['越秀区', '海珠区', '荔湾区', '天河区', '白云区'],
                axisLabel: { color: '#fff' }
            },
            yAxis: {
                type: 'value',
                axisLabel: { color: '#fff' }
            },
            series: [
                {
                    name: '三甲医院',
                    type: 'bar',
                    stack: 'total',
                    data: [5, 3, 2, 4, 3],
                    itemStyle: { color: '#00ff88' }
                },
                {
                    name: '二甲医院',
                    type: 'bar',
                    stack: 'total',
                    data: [8, 6, 5, 7, 6],
                    itemStyle: { color: '#00a1ff' }
                },
                {
                    name: '社区医院',
                    type: 'bar',
                    stack: 'total',
                    data: [15, 12, 10, 14, 13],
                    itemStyle: { color: '#ff6b6b' }
                },
                {
                    name: '专科医院',
                    type: 'bar',
                    stack: 'total',
                    data: [6, 4, 3, 5, 4],
                    itemStyle: { color: '#ffd700' }
                }
            ]
        })
    }

    // 人口健康指数图表
    if (healthIndexChart.value) {
        const chart = echarts.init(healthIndexChart.value)
        chart.setOption({
            tooltip: {
                trigger: 'item'
            },
            radar: {
                indicator: [
                    { name: '预期寿命', max: 100 },
                    { name: '健康素养', max: 100 },
                    { name: '医疗可及性', max: 100 },
                    { name: '运动参与度', max: 100 },
                    { name: '心理健康', max: 100 }
                ],
                splitArea: {
                    areaStyle: {
                        color: ['rgba(255, 255, 255, 0.1)']
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                },
                name: {
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            series: [{
                type: 'radar',
                data: [
                    {
                        value: [85, 75, 90, 80, 88],
                        name: '健康指数',
                        areaStyle: {
                            color: 'rgba(0, 255, 136, 0.3)'
                        },
                        lineStyle: {
                            color: '#00ff88'
                        },
                        itemStyle: {
                            color: '#00ff88'
                        }
                    }
                ]
            }]
        })
    }

    // 运动设施分布图表
    if (sportsChart.value) {
        const chart = echarts.init(sportsChart.value)
        chart.setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                textStyle: { color: '#fff' }
            },
            series: [
                {
                    name: '运动设施分布',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold',
                            color: '#fff'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 35, name: '体育场馆', itemStyle: { color: '#00ff88' } },
                        { value: 25, name: '健身步道', itemStyle: { color: '#00a1ff' } },
                        { value: 20, name: '社区健身设施', itemStyle: { color: '#ff6b6b' } },
                        { value: 20, name: '公园健身区', itemStyle: { color: '#ffd700' } }
                    ]
                }
            ]
        })
    }

    // 健康服务满意度图表
    if (satisfactionChart.value) {
        const chart = echarts.init(satisfactionChart.value)
        chart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisLabel: { color: '#fff' }
            },
            yAxis: {
                type: 'category',
                data: ['医疗服务', '社区服务', '运动设施', '健康管理', '心理咨询'],
                axisLabel: { color: '#fff' }
            },
            series: [
                {
                    name: '满意度',
                    type: 'bar',
                    data: [
                        { value: 92, itemStyle: { color: '#00ff88' } },
                        { value: 88, itemStyle: { color: '#00a1ff' } },
                        { value: 85, itemStyle: { color: '#ff6b6b' } },
                        { value: 90, itemStyle: { color: '#ffd700' } },
                        { value: 87, itemStyle: { color: '#9370db' } }
                    ],
                    label: {
                        show: true,
                        position: 'right',
                        formatter: '{c}%',
                        color: '#fff'
                    }
                }
            ]
        })
    }
})
</script>

<style scoped lang="scss">
.health-container {
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(180deg, #001529 0%, #003366 100%);
    color: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;

    .main-content {
        flex: 1;
        display: flex;
        gap: 20px;

        .left-panel, .right-panel {
            width: 25%;
            display: flex;
            flex-direction: column;
            gap: 20px;

            .panel-item {
                background: rgba(255, 255, 255, 0.1);
                border-radius: 10px;
                padding: 15px;
                backdrop-filter: blur(10px);
                height: calc(50% - 10px);
                box-sizing: border-box;

                .panel-title {
                    font-size: 18px;
                    margin-bottom: 15px;
                    color: #00ff88;
                    display: flex;
                    align-items: center;
                    gap: 8px;

                    .icon {
                        font-size: 24px;
                    }
                }

                .medical-chart,
                .health-index-chart,
                .sports-chart,
                .satisfaction-chart {
                    height: calc(100% - 80px);
                }
            }
        }

        .center-panel {
            flex: 1;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 20px;
            position: relative;
            backdrop-filter: blur(10px);
            box-sizing: border-box;
            height: 100%;

            .health-carousel {
                height: 100%;
                border-radius: 8px;
                overflow: hidden;

                :deep(.el-carousel__container) {
                    height: 100%;
                }

                :deep(.el-carousel__item) {
                    border-radius: 8px;
                    overflow: hidden;
                }

                .carousel-content {
                    height: 100%;
                    position: relative;

                    .carousel-caption {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        padding: 20px;
                        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
                        color: #fff;

                        h3 {
                            font-size: 24px;
                            margin-bottom: 10px;
                            color: #00ff88;
                        }

                        p {
                            font-size: 16px;
                            opacity: 0.9;
                        }
                    }
                }

                :deep(.el-carousel__arrow) {
                    background-color: rgba(0, 0, 0, 0.5);
                    border-radius: 50%;
                    width: 40px;
                    height: 40px;

                    &:hover {
                        background-color: rgba(0, 0, 0, 0.8);
                    }

                    i {
                        font-size: 20px;
                    }
                }

                :deep(.el-carousel__indicators) {
                    bottom: 20px;
                }

                :deep(.el-carousel__button) {
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    background-color: rgba(255, 255, 255, 0.5);

                    &:hover {
                        background-color: rgba(255, 255, 255, 0.8);
                    }
                }

                :deep(.el-carousel__indicator.is-active .el-carousel__button) {
                    background-color: #00ff88;
                }
            }

            .news-list {
                margin-top: 20px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 10px;
                padding: 15px;
                backdrop-filter: blur(10px);

                .news-header {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    margin-bottom: 15px;
                    padding-bottom: 10px;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

                    .icon {
                        font-size: 20px;
                    }

                    .title {
                        font-size: 18px;
                        color: #00ff88;
                        font-weight: bold;
                    }
                }

                .news-content {
                    padding: 0 10px;

                    :deep(.el-timeline-item__node) {
                        background-color: transparent;
                    }

                    :deep(.el-timeline-item__timestamp) {
                        color: #a0a0a0;
                        font-size: 12px;
                    }

                    .news-item {
                        display: flex;
                        flex-direction: column;
                        gap: 5px;

                        .news-title {
                            font-size: 16px;
                            color: #fff;
                            font-weight: bold;
                        }

                        .news-desc {
                            font-size: 14px;
                            color: #a0a0a0;
                        }
                    }
                }
            }
        }
    }
}
</style>